<template>
    <div class="row">
        <div class="settings-widget">
            <div class="settings-inner-blk p-0">
                <div class="sell-course-head comman-space">
                    <div class="d-flex align-items-center justify-content-between">

                        <div>
                            <h3>我的教师</h3>
                            <p>您累积有教师：243，目前上课的教师有：12</p>
                        </div>
                        <div class="ticket-btn-grp">
                            <a href="#" data-bs-toggle="modal" data-bs-target="#addteacher">创建教师</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">

            <div class="showing-list">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="d-flex align-items-center">
                            <div class="view-icons">
                                <a href="students-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                                <a href="students-list.html" class="list-view"><i class="feather-list"></i></a>
                            </div>
                            <div class="show-result">
                                <h4>Showing 1-9 of {{ total }} results</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div v-for="item in list" :key="item.id" class="col-lg-3 col-md-6 d-flex">
                    <div class="student-box flex-fill">
                        <div class="student-img">
                            <a href="student-profile.html">
                                <img class="img-fluid" alt="Students Info" src="assets/img/user/user1.jpg">
                            </a>
                        </div>
                        <div class="student-content pb-0">
                            <h5><a href="student-profile.html">Charles Dickens</a></h5>
                            <h6>{{ item.name }}</h6>
                        </div>
                    </div>
                </div>

            </div>

            <app-pagination :total="total" :current="params.pageIndex" @pageChange="pageChange" />
        </div>
        <div class="modal-styles modal fade" id="addteacher" tabindex="-1" aria-labelledby="addteacher"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">添加老师</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><i
                                class="fa-regular fa-circle-xmark"></i></button>
                    </div>
                    <div class="modal-body">
                        <div class="addpaymethod-form add-course-info">
                            <form action="#">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group">
                                            <label class="form-control-label">姓名</label>
                                            <input type="text" v-model="formData.name" class="form-control"
                                                placeholder="请输入用户名">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-control-label">手机号</label>
                                            <input type="telephone" v-model="formData.telephone" class="form-control"
                                                placeholder="用于登录">
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer me-auto">
                        <button type="button" class="btn btn-modal-style btn-theme" @click="save">保存</button>
                        <button type="button" class="btn btn-modal-style btn-cancel" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
const userInfo = useUseInfo()
const formData = reactive({
    name: '',
    avatar: '',
    telephone: '',
    tenantID: userInfo.value.user.tenantID
})

const list = ref([])
const total = ref(0)
const params = reactive({
    pageIndex: 1,
    pageSize: 10
})

const save = async () => {
    $('#addteacher').modal('hide')
    await teacherApi.add(formData)
    search()
}
const pageChange = async (e) => {
    params.pageIndex = e
    await search()
}
const edit = (e) => {
    formData.title = e.title
    formData.telephone = e.telephone
    formData.type = e.type
    $('#addcustom').modal('show')
}
const del = async (e) => {
    await customApi.del(e)
    search()
    console.log(e)
}
const search = async () => {
    const res = await teacherApi.getList(params.pageIndex, params.pageSize)
    console.log(res)
    list.value = res.list
    total.value = res.pager.total

}
onMounted(async () => {
    await nextTick();
    search()

})
</script>